<div v-cloak id="app" class="main-content">
    <div class="form-body">
        <one-form :config="config" v-model="fdata" ref="ruleForm">
            <div slot="menuLeft">
                <el-button
                    class="button-item"
                    :loading="btnLoading"
                    type="primary"
                    @click="store('ruleForm')"
                    size="small"
                >
                    保存
                </el-button>
                <el-button size="small" @click="backpage()">返回</el-button>
            </div>
            <template
                slot="form-item-end"
                slot-scope="scope"
                v-if="scope.row.tip"
            >
                <span style="left: 400px; position: absolute; font-size: 12px">
                    提示：{{scope.row.tip}}
                </span>
            </template>
            <!-- 上传图片 -->
            <template slot="img" slot-scope="scope">
                <one-img-cell
                    v-model="fdata[scope.row.prop]"
                    :img-cell-item-style="{width:'100px',height: '100px',}"
                    :max="1"
                ></one-img-cell>
            </template>
        </one-form>
        <div class="form-remark">
            <div class="el-divider el-divider--horizontal"><!----></div>
            <div class="content">
                <p class="font-waring">
                    注：请严格按照下面规则进行广告添加，否则将无法正常展示相关广告！
                </p>
                <p>
                    启动页：只支持自定义图片或自定义视频广告，添加小程序广告位id无效
                </p>
                <p>
                    全局普通广告：支持
                    自定义图片、自定义视频、小程序BANNER广告、小程序视频广告、小程序格子广告、小程序原生模版除弹屏广告外
                </p>
                <p>播放页弹窗：支持 自定义图片、自定义视频、小程序插屏广告</p>
                <p>
                    播放页视频上、下方：支持
                    自定义图片、自定义视频、小程序BANNER广告、小程序视频广告、小程序格子广告、小程序原生模版除弹屏广告外
                </p>
                <p>播放前贴片：支持 小程序视频贴片广告</p>
                <p>播放页激励：支持 小程序激励式广告</p>
            </div>
        </div>
    </div>
</div>
{include file='common@components/one-form'} {include
file='common@components/one-img-cell'}
<script>
    const _formData = JSON.parse('{:json_encode((array)$formData, 1)}');
    const _options = JSON.parse('{:json_encode((array)$options, 1)}');
    const _type = JSON.parse('{:json_encode((array)$type, 1)}');
    const _groupData = JSON.parse('{:json_encode((array)$groupData, 1)}');
    const app = new Vue({
        el: '#app',
        data() {
            const imgValidator = (rule, value, callback) => {
                if (this.fdata.ad_type == 1 && this.fdata.img == '') {
                    callback(new Error('当前类型下图片不能为空'));
                } else {
                    callback();
                }
            };
            const vUrlValidator = (rule, value, callback) => {
                if (this.fdata.ad_type == 2 && this.fdata.v_url == '') {
                    callback(new Error('当前类型下视频地址不能为空'));
                } else {
                    callback();
                }
            };
            return {
                uploading: false,
                loading: false,
                btnLoading: false,
                config: {
                    formdesc: [
                        {
                            label: '展示位置 :',
                            prop: 'type',
                            type: 'select',
                            rules: [
                                {
                                    required: true,
                                    message: '请选择广告展示位置',
                                },
                            ],
                            options: _type,
                        },
                        {
                            label: '广告类型 :',
                            prop: 'ad_type',
                            type: 'group-select',
                            rules: [
                                { required: true, message: '请选择广告类型' },
                            ],
                            options: _options,
                        },
                        {
                            label: '广告名称 :',
                            prop: 'title',
                            type: 'input',
                            rules: [
                                { required: true, message: '广告名称不能为空' },
                            ],
                            bind: {
                                placeholder: '请输入广告名称',
                            },
                        },
                        {
                            label: '跳转链接|广告位ID :',
                            prop: 'url',
                            type: 'input',
                            content: '广告位ID在小程序流量主后台创建广告位获取',
                            rules: [
                                {
                                    required: true,
                                    message: '跳转链接|广告位ID不能为空',
                                },
                            ],
                            tip: '自定义类型广告填写跳转连接；小程序广告填写广告位',
                        },
						{
                            label: '绑定会员组 :',
                            prop: 'group_id',
                            type: 'select',
                            content:
                                '绑定后该广告只针对此会员组展示',
                            options: _groupData,
							rules: [
                                { required: true, message: '请选择要绑定的会员组' },
                            ],
                        },
                        {
                            label: '广告图片 :',
                            prop: 'img',
                            content: '类型为自定义图片广告时必填',
                            rules: [
                                {
                                    validator: imgValidator,
                                },
                            ],
                            slot: true,
                        },
                        {
                            label: '视频地址 :',
                            prop: 'v_url',
                            type: 'input',
                            content:
                                '类型为自定义视频广告时必填（.mp4等视频格式后缀）',
                            rules: [
                                {
                                    validator: vUrlValidator,
                                },
                            ],
                            tip: '地址格式为http://或https://',
                        },
                        {
                            label: '视频id :',
                            prop: 'vid',
                            type: 'input',
                            content:
                                '类型为普通图片时生效必填，在cms系统-视频管理中获取',
                        }
                    ],
                    labelWidth: '200px',
                    rowSize: 1, //一行可以展示几列表单，默认为3列
                },
                fdata: {
                    id: 0,
                    title: '',
                    desc: '',
                    img: '',
                    v_url: '',
                    url: '',
                    type: '',
                    ad_type: '',
                },
            };
        },
        created() {},
        mounted() {
            let _this = this;
            if (Object.keys(_formData).length > 0) {
                for (let key in _this.fdata) {
                    _this.fdata[key] = _formData[key];
                }
            }
        },
        methods: {
            //表单验证
            getFormPromise(form) {
                return new Promise((resolve) => {
                    form.validate((res) => {
                        resolve(res);
                    });
                });
            },
            store(formName) {
                let _this = this;
                // 获取到组件中的form
                const configForm = this.$refs.ruleForm.$refs.ruleForm;
                // 使用Promise.all去校验结果,可加入多个表单
                Promise.all([configForm].map(this.getFormPromise)).then(
                    (res) => {
                        const validateResult = res.every((item) => !!item);
                        if (validateResult) {
                            _this.loading = true;
                            request({
                                params: {
                                    s: 'banner/banner/editAd',
                                },
                                method: 'post',
                                data: _this.fdata,
                            }).then((e) => {
                                _this.loading = false;
                                if (e.data.code == 0) {
                                    _this.backpage();
                                } else {
                                    _this.$message.error(e.data.msg);
                                }
                            });
                        } else {
                            console.log('表单未校验通过');
                        }
                    }
                );
            },
            backpage() {
                historyGo(-1);
            },
        },
    });
</script>
